<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书籍详情 - ZLibLike平台</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
</head>
<body>
    <div th:replace="~{commons/header :: header}"></div>
    
    <div class="container mt-4">
        <div class="row" id="bookDetails">
            <!-- 书籍详情将通过JavaScript动态加载 -->
            <div class="col-md-3">
                <img id="cover" src="" alt="封面" class="img-fluid book-cover">
            </div>
            <div class="col-md-9">
                <h2 id="title"></h2>
                <div class="book-meta">
                    <p><strong>作者：</strong><span id="author"></span></p>
                    <p><strong>出版社：</strong><span id="publisher"></span></p>
                    <p><strong>出版年份：</strong><span id="pubYear"></span></p>
                    <p><strong>语言：</strong><span id="language"></span></p>
                    <p><strong>ISBN-10：</strong><span id="isbn10"></span></p>
                    <p><strong>ISBN-13：</strong><span id="isbn13"></span></p>
                </div>
                
                <div class="download-section mt-4">
                    <h4>下载书籍</h4>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="formatSelect">选择格式：</label>
                                <select id="formatSelect" class="form-control">
                                    <!-- 可用格式将通过JavaScript加载 -->
                                </select>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <button id="downloadBtn" class="btn btn-primary btn-download">
                                <i class="fa fa-download"></i> 下载
                            </button>
                            <button id="convertBtn" class="btn btn-secondary ml-2">
                                <i class="fa fa-exchange"></i> 转换格式
                            </button>
                        </div>
                    </div>
                    <div id="downloadLimitAlert" class="alert alert-warning mt-3 d-none">
                        您今日的下载次数已达上限，请明天再试或升级账户。
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 转换格式模态框 -->
    <div class="modal fade" id="convertModal" tabindex="-1" aria-labelledby="convertModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="convertModalLabel">格式转换</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="targetFormat">选择目标格式：</label>
                        <select id="targetFormat" class="form-control">
                            <option value="PDF">PDF</option>
                            <option value="EPUB">EPUB</option>
                            <option value="MOBI">MOBI</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitConvert">开始转换</button>
                </div>
            </div>
        </div>
    </div>
    
    <div th:replace="~{commons/footer :: footer}"></div>
    
    <script src="/js/jquery-3.6.0.min.js"></script>
    <script src="/js/bootstrap.bundle.min.js"></script>
    <script th:inline="javascript">
        $(document).ready(function() {
            const bookId = new URLSearchParams(window.location.search).get('id');
            if (!bookId) {
                window.location.href = '/books';
                return;
            }
            
            // 加载书籍详情
            fetch(`/api/book/${bookId}`)
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        const book = data.data;
                        $('#title').text(book.title);
                        $('#author').text(book.author);
                        $('#publisher').text(book.publisher);
                        $('#pubYear').text(book.pubYear);
                        $('#language').text(book.language);
                        $('#isbn10').text(book.isbn10);
                        $('#isbn13').text(book.isbn13);
                        $('#cover').attr('src', book.coverUrl);
                        
                        // 加载可用格式
                        loadAvailableFormats(bookId);
                    } else {
                        alert('书籍不存在');
                        window.location.href = '/books';
                    }
                })
                .catch(error => console.error('Error:', error));
            
            // 加载可用格式
            function loadAvailableFormats(bookId) {
                fetch(`/api/book/${bookId}/formats`)
                    .then(response => response.json())
                    .then(data => {
                        if (data.status === 200) {
                            const formats = data.data;
                            $('#formatSelect').empty();
                            formats.forEach(format => {
                                $('#formatSelect').append(`<option value="${format}">${format}</option>`);
                            });
                        }
                    })
                    .catch(error => console.error('Error:', error));
            }
            
            // 下载按钮点击事件
            $('#downloadBtn').click(function() {
                const format = $('#formatSelect').val();
                window.location.href = `/api/book/download/${bookId}?format=${format}`;
            });
            
            // 转换格式按钮点击事件
            $('#convertBtn').click(function() {
                $('#convertModal').modal('show');
            });
            
            // 提交转换请求
            $('#submitConvert').click(function() {
                const targetFormat = $('#targetFormat').val();
                
                fetch(`/api/book/convert/${bookId}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        targetFormat: targetFormat
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.status === 200) {
                        $('#convertModal').modal('hide');
                        alert(`格式转换请求已提交，预计完成时间：${data.data.estimatedTime}秒`);
                    } else {
                        alert(data.message);
                    }
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('转换请求失败');
                });
            });
        });
    </script>
</body>
</html> 